<template>
  <div class="box">
    <div class="titleImg">
      <!-- 搜索 -->
      <div class="searchBox">
        <div>圆融时代广场</div>
        <search-view></search-view>
        <!-- <div>
          <input type="text" placeholder="请输入商品名称" />
        </div> -->
      </div>
      <!-- 轮播图 -->
      <div class="swiperBox">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image.icon_url" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="maiCaiImg"></div>
    <!-- icon图片 -->
    <div class="iconUrl">
      <ul class="uls">
        <li v-for="(item, index) in icon" :key="index">
          <img v-lazy="item.icon_url" alt="" />
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>

    <!-- 加入会员 -->
    <div class="huiy">
        <span>加入会员·每年预计节省806元</span>
        <span>5折开卡></span>
    </div>

    <!-- 倒计时 -->
    <daoji-shi :limit="limit"></daoji-shi>

    <!-- 切换列表 -->
   <list-view :list="list" :limit="limit"></list-view>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</template>

<script>
import DaojiShi from './components/DaojiShi.vue';
import ListView from './components/ListView.vue';
import SearchView from './components/SearchView.vue';
export default {
  components: { DaojiShi , ListView, SearchView},
  name: "HomeView",
  data() {
    return {
      images: [], //轮播图
      icon:[], //icon图片
      limit:[],//限时抢购
      list:[],//全部
    };
  },
  async created() {
    //轮播图
    let res = await this.$http.getHomeApi();
    this.images = res.data.data.list[0].icon_list;
    console.log(this.images);
    //icon图片
    this.icon = res.data.data.list[2].icon_list;
    // console.log(this.icon);

    this.limit = res.data.data.list[3].product_list;
    // console.log(this.limit);

    this.list = res.data.data.list[12].product_list;
    console.log(this.list);
    console.log(res.data.data.list);

  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
}
.titleImg {
  width: 100%;
  height: 4.4rem;
  background: url("../../../ps原图/assets/img/home/backImage.png") no-repeat;
  overflow: hidden;
}
.maiCaiImg {
  width: 100%;
  height: 1.62rem;
  background: url("../../../ps原图/assets/img/home/1.png") no-repeat;
  background-size: 100% 100%;
}
.searchBox {
  width: 100%;
  height: 0.56rem;
  margin-top: 0.17rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.26rem;
  div {
    height: 100%;
    border-radius: 0.5rem;
  }
  div:nth-child(1) {
    width: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    text-indent: 0.2rem;
  }
  div:nth-child(2) {
    width: 44%;
    input {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 0.5rem;
      text-indent: 0.4rem;
    }
  }
}
.swiperBox {
  width: 100%;
  height: 2.9rem;
  margin-top: 0.2rem;
  padding: 0 0.2rem;
  box-sizing: border-box;
  .van-swipe {
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    .van-swipe-item {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.iconUrl {
  width: 100%;
  .uls {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: .2rem;
      margin-bottom: .1rem;
      img {
        width: 60%;
      }
      span{
        font-size: .24rem;
      }
    }
  }
}
.huiy{
  width: 90%;
  height: .56rem;
  margin: 0 auto;
  color: white;
  border-radius: .1rem;
  font-size: .26rem;
  background: #44B861;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: .2rem;
}
</style>
